﻿<template>
    <div class="ad-content">
        <div class="ad-tree">
            <div class="ad-title">
                <span>管理员管理</span>
            </div>
            <div class="ad-treebody">
                <el-menu ref="nav" background-color="#E8E8EB" @select="open">
                    <el-menu-item index="1">
                        <i class="icon-pause el-icon--left"></i>
                        <span slot="title">待开通</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="icon-play2 el-icon--left"></i>
                        <span slot="title">已开通</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="icon-stop el-icon--left"></i>
                        <span slot="title">已停用</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="ad-main">
            <div class="ad-console-top">
                <div class="ad-console-top-name">管理员列表</div>
                <div class="ad-console-top-body">
                </div>
                <div class="ad-console-top-end">
                </div>
            </div>
            <div class="ad-console-body">
                <div class="ad-console-toolbar">
                    <el-button type="primary" size="mini" icon="icon-plus4 el-icon--left" @click="openDialog()">创建管理员</el-button>
                    <div style="float:right">
                        <el-select v-model="PlusID" placeholder="请选择" size="small" style="width:150px;">
                            <el-option v-for="item in pluslist"
                                       :key="item.PlusID"
                                       :label="item.PlusName"
                                       :value="item.PlusID">
                            </el-option>
                        </el-select>
                        <el-input v-model="searchkey" placeholder="请输入关键字" style="width:180px;" size="small"></el-input>
                        <el-button type="primary" size="mini" icon="icon-search" @click="search()"></el-button>
                    </div>
                </div>
                <div class="ad-card">
                    <el-table :data="list" size="mini" border style="width: 100%">
                        <el-table-column prop="ManagerID" label="编号" width="100" align="center"></el-table-column>
                        <el-table-column prop="Username" label="用户名" width="130" align="center"></el-table-column>
                        <el-table-column prop="Realname" label="真实姓名" width="130" align="center"></el-table-column>
                        <el-table-column prop="Tel" label="电话" width="130" align="center"></el-table-column>
                        <el-table-column prop="Value" label="备注" header-align="center"></el-table-column>
                        <el-table-column prop="Plus.PlusName" label="帐号归属" width="130" align="center"></el-table-column>
                        <el-table-column label="权限" width="50" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="openDialog(scope.row.ManagerID)">权限</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="openDialog(scope.row.ManagerID)">编辑</el-button>
                                <el-button type="text" v-if="scope.row.Status=='1'||scope.row.Status=='3'" size="mini" @click="pass(scope.row.ManagerID)">开通</el-button>
                                <el-button type="text" v-if="scope.row.Status=='2'" size="mini" @click="stop(scope.row.ManagerID)">停用</el-button>
                                <el-button type="text" v-if="scope.row.Status=='2'" size="mini" @click="reset(scope.row.ManagerID)">重置密码</el-button>
                                <el-button type="text" v-if="scope.row.Status=='1'" size="mini" @click="del(scope.row.ManagerID)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <el-dialog title="创建管理员" :visible="showDialog" width="650px" @close="showDialog=false;resetForm()">
                <el-form :model="form" :rules="formRules" ref="form" label-width="85px">
                    <el-form-item label-width="0px">
                        <template v-if="!ManagerID">
                            <el-col :span="12">
                                <el-form-item label="用户名" prop="Username">
                                    <el-input v-model="form.Username"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="密码" prop="Password">
                                    <el-input type="password" v-model="form.Password"></el-input>
                                </el-form-item>
                            </el-col>
                        </template>
                        <template v-else>
                            <el-col :span="23">
                                <el-form-item label="用户名" prop="Username">
                                    <el-input v-model="form.Username"></el-input>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="12">
                            <el-form-item label="真实姓名" prop="Realname">
                                <el-input v-model="form.Realname"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="电话" prop="Tel">
                                <el-input v-model="form.Tel"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="12">
                            <el-form-item label="电子邮箱" prop="Email">
                                <el-input v-model="form.Email"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="帐号归属" prop="PlusID">
                                <el-select v-model="form.PlusID" placeholder="请选择" style="width:100%">
                                    <el-option v-for="item in pluslist"
                                               :key="item.PlusID"
                                               :label="item.PlusName"
                                               :value="item.PlusID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="23">
                            <el-form-item label="备注" prop="Value">
                                <el-input v-model="form.Value" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="12">
                            <el-form-item label="备注1" prop="Value1">
                                <el-input v-model="form.Value1" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="备注2" prop="Value2">
                                <el-input v-model="form.Value2" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="12">
                            <el-form-item label="备注3" prop="Value3">
                                <el-input v-model="form.Value3" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="备注4" prop="Value4">
                                <el-input v-model="form.Value4" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" @click="submit">提交</el-button>
                        <el-button size="medium" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                status: '',
                showDialog: false,
                pluslist: [],

                list: [],
                count: 0,
                currentpage: 0,
                PlusID: '',
                searchkey: '',

                ManagerID: '',
                form: {
                    PlusID: '',
                    Username: '',
                    Password: '',
                    Email: '',
                    Realname: '',
                    Tel: '',
                    Value: '',
                    Value1: '',
                    Value2: '',
                    Value3: '',
                    Value4: ''
                },
                formRules: {
                    PlusID: [
                        { required: true, message: '请选择帐号归属.', trigger: 'blur' }
                    ],
                    Username: [
                        { required: true, message: '请输入用户名.', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在2-20内.', trigger: 'blur' }
                    ],
                    Realname: [
                        { required: true, message: '请输入真实姓名.', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在2-20内.', trigger: 'blur' }
                    ],
                    Password: [
                        { required: true, message: '请输入密码.', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在2-20内.', trigger: 'blur' }
                    ],
                    Email: [
                        { type: 'email', message: '请输入正确的邮箱地址.', trigger: 'blur' }
                    ],
                    Value: [
                        { min: 0, max: 1000, message: '长度不能超过1000.', trigger: 'blur' }
                    ],
                    Value1: [
                        { min: 0, max: 1000, message: '长度不能超过1000.', trigger: 'blur' }
                    ],
                    Value2: [
                        { min: 0, max: 1000, message: '长度不能超过1000.', trigger: 'blur' }
                    ],
                    Value3: [
                        { min: 0, max: 1000, message: '长度不能超过1000.', trigger: 'blur' }
                    ],
                    Value4: [
                        { min: 0, max: 1000, message: '长度不能超过1000.', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            App.Page.init(this);
            this.loadplus();
            this.$refs.nav.$children[0].handleClick();
        },
        methods: {
            open(index) {
                this.status = index;
                this.PlusID = '';
                this.searchkey = '';
                this.load();
            },
            loadplus() {
                App.Service.post("/plus/Nhd/SysManager/GetPlus", {}).then((res) => {
                    if (res.success) {
                        this.pluslist = res.data
                    }
                });
            },
            load(PlusID, searchkey) {
                App.Service.post("/plus/Nhd/SysManager/GetManagers", { PlusID: PlusID, key: searchkey, status: this.status, start: App.Fn.toStart(this.currentpage), limit: App.pagesize }).then((res) => {
                    if (res.success) {
                        this.list = res.data
                        this.count = res.totalcount;
                    }
                });
            },
            openDialog(ManagerID) {
                this.ManagerID = ManagerID;
                if (!ManagerID) {
                    this.showDialog = true;
                    return;
                }
                App.Service.post("/plus/Nhd/SysManager/GetManager", { ManagerID: ManagerID }).then((res) => {
                    if (res.success) {
                        this.showDialog = true;
                        this.form = res.data;
                    }
                });
            },
            closeDialog() {
                this.showDialog = false;
                this.resetForm();
            },
            search() {
                this.load(this.PlusID, this.searchkey);
            },
            submit() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        if (this.ManagerID) {
                            App.Service.post("/plus/Nhd/SysManager/EditManager", App.Fn.clone(this.form, { ManagerID: this.ManagerID })).then((res) => {
                                if (res.success) {
                                    App.Msg.success('管理员编辑成功！');
                                    this.resetForm();
                                    this.showDialog = false;
                                    this.load();
                                }
                            });
                            return;
                        }
                        App.Service.post("/plus/Nhd/SysManager/AddManager", this.form).then((res) => {
                            if (res.success) {
                                App.Msg.success('管理员创建成功！');
                                this.resetForm();
                                this.showDialog = false;
                                this.load();
                            }
                        });
                    }
                });
            },
            resetForm() {
                this.$refs["form"].resetFields();
            },
            pagerclick(currentpage) {
                this.currentpage = currentpage;
                this.load();
            },
            pass(ManagerID) {
                App.Service.post("/plus/Nhd/SysManager/PassManager", { ManagerID: ManagerID }).then((res) => {
                    if (res.success) {
                        App.Msg.success('帐号已开通.');
                        this.load();
                    }
                });
            },
            stop(ManagerID) {
                App.Service.post("/plus/Nhd/SysManager/StopManager", { ManagerID: ManagerID }).then((res) => {
                    if (res.success) {
                        App.Msg.success('帐号已停用.');
                        this.load();
                    }
                });
            },
            reset(ManagerID) {
                App.Page.confirm("确认要重置密码吗? 重置后密码跟用户名一样.", () => {
                    App.Service.post("/plus/Nhd/SysManager/ResetManager", { ManagerID: ManagerID }).then((res) => {
                        if (res.success) {
                            App.Msg.success('密码重置成功.');
                            this.load();
                        }
                    });
                });
            },
            del(ManagerID) {
                App.Page.confirm("确认删除该管理员帐号吗?", () => {
                    App.Service.post("/plus/Nhd/SysManager/DeleteManager", { ManagerID: ManagerID }).then((res) => {
                        if (res.success) {
                            App.Msg.success('帐号删除成功.');
                            this.load();
                        }
                    });
                });
            }
        }
    };
</script>
